<template>
	<a-card :bordered="false">
		<a-form ref="searchFormRef" name="advanced_search" :model="searchFormState" class="ant-advanced-search-form mb-4">
			<a-row :gutter="24">
				<a-col :span="6">
					<a-form-item label="组柜名称" name="cabinetGroupName">
						<a-input v-model:value.trim="searchFormState.cabinetGroupName" placeholder="请输入组柜名称" />
					</a-form-item>
				</a-col>
				<a-col :span="6">
					<a-form-item label="组织" name="orgName">
						<a-input v-model:value.trim="searchFormState.orgName" placeholder="请输入组织名称" />
					</a-form-item>
				</a-col>
				<a-col :span="6">
					<a-form-item label="管理员" name="adminName">
						<a-input v-model:value.trim="searchFormState.adminName" placeholder="请输入管理员名称" />
					</a-form-item>
				</a-col>
				<a-col :span="6">
					<a-button type="primary" @click="table.refresh(true)">查询</a-button>
					<a-button style="margin: 0 8px" @click="resetForm()">重置</a-button>
				</a-col>
			</a-row>
		</a-form>
		<s-table
			ref="table"
			:columns="columns"
			:data="loadData"
			:alert="options.alert.show"
			bordered
			:row-key="(record) => record.id"
			:tool-config="toolConfig"
			:row-selection="options.rowSelection"
			:scroll="{ x: 1200 }"
		>
			<template #operator class="table-operator">
				<a-space>
					<a-button type="primary" @click="formRef.onOpen()" v-if="hasPerm('bizCabinetGroupReagentAdd')">
						<template #icon>
							<plus-outlined />
						</template>
						新增
					</a-button>
				</a-space>
			</template>
			<template #bodyCell="{ column, record }">
				<template v-if="column.dataIndex === 'linkerList'">
					<a type="text" @click="openLinkerDialog(record.id)" v-if="hasPerm('bizCabinetGroupReagentLinkers')">联系人({{ record.linkerCount }})</a>
				</template>
				<template v-if="column.dataIndex === 'reagentStorageType'">
					{{ $TOOL.dictTypeData('REAGENT_STORAGE_TYPE', record.reagentStorageType) }}
				</template>
				<template v-if="column.dataIndex === 'action'">
					<a-space>
						<a @click="formRef.onOpen(record)" v-if="hasPerm('bizCabinetGroupReagentEdit')">编辑</a>
						<a-dropdown>
							<a class="ant-dropdown-link">
								更多
								<DownOutlined />
							</a>
							<template #overlay>
								<a-menu>
									<a-menu-item><a @click="goReagentList(record)" v-if="hasPerm('bizCabinetGroupReagentGoodsList')">试剂列表</a></a-menu-item>
									<a-menu-item><a @click="goPermissionList(record)"  v-if="hasPerm('bizCabinetGroupReagentGrantUser')">人员授权</a></a-menu-item>
									<a-menu-item><a @click="deviceVideoRef.onOpen(record.id, true)" v-if="hasPerm('bizCabinetGroupReagentMonitor')">实时监控</a></a-menu-item>
								</a-menu>
							</template>
						</a-dropdown>
					</a-space>
				</template>
				<template v-if="column.dataIndex === 'cabinetList'">
					<a @click="goCabinetList(record)"  v-if="hasPerm('bizCabinetGroupReagentRelatedCabinet')">关联柜子</a>
				</template>
			</template>
		</s-table>
	</a-card>
	<Form ref="formRef" @successful="onSuccess" />
	<cabinetlinkman ref="CabinetLinkman" @successful="afterChooseLinker" />
	<CabinetGroupVideo ref="deviceVideoRef" />
</template>

<script setup name="cabinetgroup">
	import { message } from 'ant-design-vue'
	import Form from './form.vue'
	import cabinetlinkman from '../cabinetlinkman/index.vue'
	import CabinetGroupVideo from '../deviceVideo/CabinetGroupVideo.vue'
	import bizCabinetGroupReagentApi from '@/api/biz/bizCabinetGroupReagentApi'
	import { useRouter } from 'vue-router' // 引入userRouter
	let searchFormState = reactive({})
	const deviceVideoRef = ref()
	const searchFormRef = ref()
	const CabinetLinkman = ref()
	const table = ref()
	const formRef = ref()
	const toolConfig = { refresh: true, height: true, columnSetting: true, striped: false }

	const columns = [
		{
			title: '组柜名称',
			dataIndex: 'cabinetGroupName',
			ellipsis: true
		},
		{
			title: '组柜编号',
			dataIndex: 'cabinetGroupCode'
		},
		{
			title: '存放区域',
			dataIndex: 'locationName',
			ellipsis: true
		},
		{
			title: '组织',
			dataIndex: 'orgName',
			ellipsis: true
		},
		{
			title: '存放试剂类型',
			dataIndex: 'reagentStorageType',
			ellipsis: true
		},
		{
			title: '存放总数',
			dataIndex: 'totalStock',
			width: '75px'
		},
		{
			title: '当前在库',
			dataIndex: 'currentStock',
			width: '75px'
		},
		{
			title: '当前借出',
			dataIndex: 'currentBorrowed',
			width: '75px'
		},
		{
			title: '管理员',
			dataIndex: 'adminUserNames',
			ellipsis: true
		},
		{
			title: '联系人',
			dataIndex: 'linkerList',
			width: '80px',
			fixed: 'right'
		},
		{
			title: '柜子',
			dataIndex: 'cabinetList',
			width: '80px',
			fixed: 'right'
		}
	]
	// 操作栏通过权限判断是否显示
	if (hasPerm(['bizCabinetGroupReagentEdit'])) {
		columns.push({
			title: '操作',
			dataIndex: 'action',
			align: 'center',
			width: '100px',
			fixed: 'right'
		})
	}
	let selectedRowKeys = ref([])
	// 列表选择配置
	const options = {
		alert: {
			show: false,
			clear: () => {
				selectedRowKeys = ref([])
			}
		},
		rowSelection: {
			onChange: (selectedRowKey, selectedRows) => {
				selectedRowKeys.value = selectedRowKey
			}
		}
	}
	const loadData = (parameter) => {
		const searchFormParam = JSON.parse(JSON.stringify(searchFormState))
		return bizCabinetGroupReagentApi.bizCabinetGroupPage(Object.assign(parameter, searchFormParam)).then((data) => {
			return data
		})
	}
	const openLinkerDialog = (cabinetGroupId) => {
		CabinetLinkman.value.onOpen(cabinetGroupId, null)
	}
	const afterChooseLinker = () => {
		table.value.refresh(true)
	}

	const router = useRouter()
	const goCabinetList = (record) => {
		router.replace({
			name: 'cabinetinfo_reagent',
			params: {
				cabinetGroupId: record.id
			}
		})
	}
	const goReagentList = (record) => {
		router.replace({
			name: 'bizReagent',
			params: {
				cabinetGroupId: record.id
			}
		})
	}

	const goPermissionList = (record) => {
		// console.log('record=', record)
		router.replace({
			name: 'cabinetpermission_reagent',
			params: {
				cabinetGroupId: record.id,
				cabinetGroupName: record.cabinetGroupName
			}
		})
	}

	watch(
		() => router.currentRoute.value,
		(newValue, oldValue) => {
			if (newValue.name === 'cabinetgroup') {
				let params = newValue.params
				console.log('params=', params)
				// 接收路由参数
				let cabinetGroupId = params.cabinetGroupId
				let cabinetGroupName = params.cabinetGroupName
				if (cabinetGroupId && cabinetGroupId !== searchFormState.cabinetGroupId) {
					searchFormState.cabinetGroupId = cabinetGroupId
					searchFormState.cabinetGroupName = cabinetGroupName
					// 加载数据
					if (table.value) {
						table.value.refresh(true)
					}
				}
			}
		},
		{
			immediate: true
		}
	)

	const resetForm = () => {
		searchFormRef.value.resetFields()
		searchFormState.cabinetGroupId = null
		searchFormState.cabinetGroupName = null
		table.value.refresh(true)
	}

	const onSuccess = () => {
		table.value.refresh(true)
		message.success('保存成功')
	}
</script>
